<template>
    <div class="page-content">
        <div class="comm-content" ref="box">种植面积</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    watch: {
        themeStatus() {
            console.log(this.$store.state.theme);
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    mounted() {

        this.initEcharts()
        this.getData()
        window.addEventListener("resize", this.screen)
        this.screen()
        // console.log(dataList, dataClass, dataArea);


    },
    destroyed() {
        window.removeEventListener('reset', this.screen)
    },
    methods: {
        //适配屏幕
        screen() {
            this.myEcharts.resize()
            //计算一个文字大小比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 5
            let options = {
                title: {
                    textStyle: {
                        //设置主题样式
                        fontSize: num
                    }
                }
            }
            //修改之后要重绘
            this.myEcharts.setOption(options)
        },
        //初始化表
        initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let options = {
                title: {
                    text: "全国种植每月收成情况",//标题内容
                    top: 10,
                    left: 10,

                },
                // 滑入显示详情
                tooltip: {

                    // trigger: 'axis',
                    axisPointer: {
                        // type: 'cross',
                        crossStyle: {
                            color: '#999'
                        },
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                xAxis: {
                    show: true,
                    type: 'category'
                  
                },
                yAxis: {
                    show: true,
                    type: "value",
                    axisLine: {
                        show: true
                    }
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 50,
                        // 显示柱状图顶上的数值
                        label: {
                            normal: {
                                show: true,
                                position: 'top',//在柱状图的什么位置显示
                                textStyle: {
                                    color: 'width'
                                }
                            }
                        },
                        itemStyle: {
                            barBorderRadius: [25, 25, 0, 0],
                            // 设置柱状图颜色
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 1,
                                    color: "#33B3D9"
                                },
                                {
                                    offset: 0,
                                    color: "#11385D"
                                }
                            ]),
                        }

                    }
                ]
            }
            this.myEcharts.setOption(options)
        },
        //请求数据
        async getData() {
            let dataList = await this.$http("/plantingHarvest")
            //   return
            let dataClass = dataList.data.map(item => {
                return item.month
            })
            let dataArea = dataList.data.map(item => {
                return item.harvest
            })
            this.setEcharts(dataClass, dataArea)
        },
        //绘制图表
        setEcharts(dataClass, dataArea) {
            let options = {
                yAxis: {
                    data: dataClass
                },
                series: [
                    {
                        data: dataArea
                    }
                ]

            }
            this.myEcharts.setOption(options)
        }


    }

}
</script>
<style scoped></style>